<template>
  <div class="cpk-chart">
    <el-row :gutter="20">
      <el-col :span="12">
        <chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" width="100%" />
      </el-col>
      <el-col :span="12">
        <chart-view class="chart-content" :chart-option="chartOpt" :auto-resize="true" width="100%" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from 'vue';
import ChartView from '@/components/chart/index.vue';
// import { Descriptions } from 'element-ui'
// Vue.use(Descriptions);
export default {
    name: 'cpkChart',
    components: {
        ChartView
    },
    data() {
        return {
            chartOpt: {
                legend: {
                    // 图例的数据数组。
                    data: ['Evaporation']
                },
                tooltip: {
                    // 触发类型
                    trigger: 'axis',
                    // 是配置坐标轴指示器的快捷方式
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [150, 230, 224, 218, 135, 147, 260],
                        name: 'Evaporation',
                        type: 'line'
                    }
                ]
            }
        }
    },

    methods: {
        init() {

        },
        getParam(low, mean, up, top, lsl, usl) {
            const res = {};
            res['low'] = this.getFloat(low);
            res['mean'] = this.getFloat(mean);
            res['up'] = this.getFloat(up);
            res['top'] = this.getFloat(top);
            res['lsl'] = this.getFloat(lsl);
            res['usl'] = this.getFloat(usl);
            return res;
        },
        getFloat(numbers, digit = 3) {
            return (numbers.toFixed(digit) / 1).toString();
        },
        // 获取Xbar-R控制图数据
        getData() {
            let index = 0
            this.setEchartsList("xbarRcharts");
            if (this.tabInfo["xbarRcharts"]) {
                return
            } else {
                this.tabInfo["xbarRcharts"] = true;
            }
            // 数据传参形式
            const spcQueryParam = this.getQueryParameter();
            this.httpService.post(Config.API_URL.SPC.GET_SPC_XBARR_DATA_URL, spcQueryParam,
                (successful, dataSet, res) => {
                    if (dataSet.stateCode === 'SYSTEM_SUCCESS') {
                        const spcStatisticsResults = _.get(dataSet, 'data', [])
                        for (let i = 0; i < spcStatisticsResults.length; i++) {
                            const spcStatisticsResult = spcStatisticsResults[i];
                            const title = _.get(spcStatisticsResult, 'reportName', '');
                            const timeData = _.get(spcStatisticsResult, 'xbarRResult.dateArray', []); // 总时间线
                            const xbarValueArray = _.get(spcStatisticsResult, 'xbarRResult.xbarValueArray', []); // Xbar图数据
                            const xbarCl = _.get(spcStatisticsResult, 'xbarRResult.xbarMidValue', ''); // Xbar图中心线
                            const xbarUcl = _.get(spcStatisticsResult, 'xbarRResult.xbarUclValue', ''); // Xbar图上控制线
                            const xbarLcl = _.get(spcStatisticsResult, 'xbarRResult.xbarLclValue', ''); // Xbar图下控制线
                            const xbarUsl = _.get(spcStatisticsResult, 'usl'); //规格上限
                            const xbarLsl = _.get(spcStatisticsResult, 'lsl'); //规格下限
                            const xbarMaxValue = _.get(spcStatisticsResult, 'xbarRResult.xbarMaxValue'); //Xbar折线最大值
                            const xbarMinValue = _.get(spcStatisticsResult, 'xbarRResult.xbarMinValue'); //Xbar折线最小值
                            const rvalueArray = _.get(spcStatisticsResult, 'xbarRResult.rvalueArray', []); // R图数据
                            const rCl = _.get(spcStatisticsResult, 'xbarRResult.rmidValue', ''); // R图中心线
                            const rUcl = _.get(spcStatisticsResult, 'xbarRResult.ruclValue', ''); // R图上控制线
                            const rLcl = _.get(spcStatisticsResult, 'xbarRResult.rlclValue', ''); // R图下控制线
                            const rmaxValue = _.get(spcStatisticsResult, 'xbarRResult.rmaxValue', ''); //R图折线最大值
                            const rminValue = _.get(spcStatisticsResult, 'xbarRResult.rminValue', ''); //R图折线最小值
                            const xbarRchartsData = {
                                title: title,
                                timeData: timeData,
                                xbarValueArray: xbarValueArray,
                                xbarCl: xbarCl,
                                xbarUcl: xbarUcl,
                                xbarLcl: xbarLcl,
                                xbarUsl: xbarUsl,
                                xbarLsl: xbarLsl,
                                xbarMaxValue: xbarMaxValue,
                                xbarMinValue: xbarMinValue,
                                rvalueArray: rvalueArray,
                                rCl: rCl,
                                rUcl: rUcl,
                                rLcl: rLcl,
                                rmaxValue: rmaxValue,
                                rminValue: rminValue
                            };
                            this.xbarRchartsDatas.push('data');
                            setTimeout(() => {
                                this.showXbarRchartsTrendChart(xbarRchartsData, i)
                            }, 50);
                        }
                        // this.router.navigate(['/spc/statistic-analysis'], {
                        //     queryParams: {
                        //         isOutline: Boolean(this.model.isOutline),
                        //         partNo: this.model.partNo,
                        //         startDate: this.model.workOrderDate.split('到 ')[0],
                        //         endDate: this.model.workOrderDate.split(' 到')[1],
                        //         lineCode: spcQueryParam.lineCode,
                        //     }
                        // });
                    } else {
                        toastr.error(
                            dataSet.messageCode ? this.translate.instant(dataSet.messageCode, { value: this.translate.instant('PART') })
                                : dataSet.message);
                    }
                },
                (successful, msg, err) => {
                    toastr.error(msg);
                }
            );
        },
        // Xbar-R控制图展示 不带数据
        showXbarRchartsTrendChart(data, i) {
            this.Echarts.xbarRchartsTrendChart[i] = echarts.init(document.getElementById(`xbarRchartsTrendChart-${i}`));
            this.Echarts.xbarRchartsTrendChart[i].setOption(EchartsClass.getXbarRchartsTrendOption(data));
        },
        getXbarRchartsTrendOption(data) {
            let xbarCl = data.xbarCl;
            let xbarUcl = data.xbarUcl;
            let xbarLcl = data.xbarLcl;
            let xbarUsl = data.xbarUsl;
            let xbarLsl = data.xbarLsl;
            let xbarMaxValue = data.xbarMaxValue;
            let xbarMinValue = data.xbarMinValue;
            let rCl = data.rCl;
            let rUcl = data.rUcl;
            let rLcl = data.rLcl;
            let rmaxValue = data.rmaxValue;
            let rminValue = data.rminValue;
            let xbarMax = xbarUcl > xbarMaxValue ? (xbarUcl > xbarUsl ? xbarUcl : xbarUsl) : (xbarMaxValue > xbarUsl ? xbarMaxValue : xbarUsl);
            let xbarMin = xbarLcl < xbarMinValue ? (xbarLcl < xbarLsl ? xbarLcl : xbarLsl) : (xbarMinValue < xbarLsl ? xbarMinValue : xbarLsl);
            let rMax = rUcl > rmaxValue ? rUcl : rmaxValue;
            let rMin = rLcl < rminValue ? rLcl : rminValue;
            const option = {
                // title: {
                //     text: data.title,
                //     subtext: 'UCL-CL-LCL'
                // },
                title: [{
                    text: data.title
                }, {
                    subtext: 'Xbar图',
                    left: '25%',
                    top: '80%',
                    textAlign: 'center'
                }, {
                    subtext: 'R图',
                    left: '75%',
                    top: '80%',
                    textAlign: 'center'
                }],
                grid: [
                    { x: '5%', y: '12%', width: '38%', height: '63%' },
                    { x2: '4.5%', y: '12%', width: '38%', height: '63%' },

                ],
                tooltip: {
                    trigger: 'item',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '时间：{b}<br/>值：{c}'
                },
                xAxis: [
                    {
                        gridIndex: 0,
                        type: 'category',
                        boundaryGap: false,
                        scale: true,
                        splitLine: false,
                        data: data.timeData
                    },
                    {
                        gridIndex: 1,
                        type: 'category',
                        boundaryGap: false,
                        scale: true,
                        splitLine: false,
                        data: data.timeData
                    }
                ],
                yAxis: [
                    {
                        gridIndex: 0,
                        type: 'value',
                        scale: true,
                        splitLine: false,
                        min: xbarMin - 0.005,
                        max: xbarMax + 0.005,
                        axisLabel: {
                            formatter: function (value, index) {
                                return value.toFixed(3);
                            }
                        }
                    },
                    {
                        gridIndex: 1,
                        type: 'value',
                        scale: true,
                        splitLine: false,
                        min: rMin - 0.005,
                        max: rMax + 0.005,
                        axisLabel: {
                            formatter: function (value, index) {
                                return value.toFixed(3);
                            }
                        }
                    },
                ],
                // dataZoom: [
                //     {
                //         type: 'inside',
                //         start: 0,
                //         end: 10,
                //         minValueSpan: 10
                //     },
                //     {
                //         show: true,
                //         type: 'slider',
                //         bottom: 60,
                //         start: 98,
                //         end: 100,
                //         minValueSpan: 10
                //     }
                // ],
                series: [
                    {
                        name: 'Xbar图',
                        type: 'line',
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        color: 'green',
                        data: data.xbarValueArray,
                        markLine: {
                            symbol: ['none', 'none'],//去掉箭头
                            lineStyle: {
                                width: 2,
                                type: 'solid',  //'dotted'虚线 'solid'实线
                                color: 'red',
                            },
                            data: [{ name: 'UCL', yAxis: xbarUcl }, { name: 'CL', yAxis: xbarCl }, { name: 'LCL', yAxis: xbarLcl }, { name: 'USL', yAxis: xbarUsl }, { name: 'LSL', yAxis: xbarLsl }],
                            label: {
                                color: 'black',
                                formatter: function (params) {
                                    var str = params.name + '=' + params.data.yAxis;
                                    return str
                                },
                            }
                        }
                    },
                    {
                        name: 'R图',
                        type: 'line',
                        xAxisIndex: 1,
                        yAxisIndex: 1,
                        color: 'green',
                        data: data.rvalueArray,
                        markLine: {
                            symbol: ['none', 'none'],//去掉箭头
                            lineStyle: {
                                width: 2,
                                type: 'solid',  //'dotted'虚线 'solid'实线
                                color: 'red',
                            },
                            data: [{ name: 'UCL', yAxis: rUcl }, { name: 'CL', yAxis: rCl }, { name: 'LCL', yAxis: rLcl }],
                            label: {
                                color: 'black',
                                formatter: function (params) {
                                    var str = params.name + '=' + params.data.yAxis;
                                    return str
                                },
                            }
                        }
                    }
                ]
            };
            return option
        }

    }
}
</script>

<style lang="scss" scoped>
.cpk-chart {
  .table {
    margin-bottom: 10px;

    // 滚动条默认宽度是16px 将thead的宽度减16px
    thead {
      width: calc(100% - 1em);
    }

    tbody {
      border: 1px solid #ddd;
      border-bottom: none;

      tr {
        border-bottom: 1px solid #ddd;

        td {
          border-right: 1px solid #ddd;
        }

        .last-cell {
          border-right: none;
        }
      }

      tr:nth-child(even) {
        background: #fbfce5 !important;
      }

      .text-blue {
        color: #5379de;
      }

      .width-label {
        width: 104px;
      }
    }
  }
}
</style>